<template>
	<view class="payIndex">
		<view class="locationContainer">
			<!-- 没有获取收货地址,显示一个按钮 获取用户收货地址-->
			<view style="width: 100%;height: 100%;display: flex; justify-content: center; align-items: center;" v-if="!isShowLocation">
				<div class="getConsignee" @click="selectedLocation">选择地址</div>
			</view>
			<!-- 有收货地址,显示个人信息 -->
			<view class="uesrInfo" v-if="isShowLocation">
				<view class="userLocaton">{{ receivingInfo.provinceName }}{{ receivingInfo.cityName }}{{ receivingInfo.countyName }}{{ receivingInfo.detailInfo }}</view>
				<view class="userDetal">
					<text class="user_name">{{ receivingInfo.userName }}</text>
					<text class="user_tel">{{ receivingInfo.telNumber | editTelphone }}</text>
				</view>
			</view>
		</view>
		<!-- 已选商品 -->
		<view class="payGoodsList">
			<view class="goodsListTitel">已购商品</view>
			<goodsItem
				v-for="(item, index) in bayList"
				:key="index"
				:goods_id="item.goods_id"
				:goods_name="item.goods_name"
				:goods_small_logo="item.goods_small_logo"
				:goods_price="item.goods_price"
			>
				<slot>
					<text style="color: #434343; font-size: 28rpx;">x{{ item.time }}</text>
				</slot>
			</goodsItem>
		</view>
		<!-- 底部支付页 -->
		<view class="floorFn">
			<view class="total_price">
				<text class="total_name">合计:</text>
				<text class="price_doll">
					￥
					<text style="font-size: 24rpx;">{{ allProduct }}</text>
				</text>
			</view>
			<view class="to_result" @click="toPay" :class="{ click_result: isShowLocation }">去结算({{ productAmount }})</view>
		</view>
	</view>
</template>

<script>
import goodsItem from '@/components/goodsItem.vue';
export default {
	components: {
		goodsItem
	},
	data() {
		return {
			bayList: '',
			allProduct: '', //总价格
			productAmount: '', //
			// 收货信息
			receivingInfo: '',
			isShowLocation: false //
		};
	},
	async onLoad(option) {
		console.log(option);
		this.bayList = await this.getGoodsDetal();
		this.allProduct = option.price;
		this.productAmount = option.amuse;
	},
	filters: {
		// 处理电话号码
		editTelphone(value) {
			let seart = value.substr(0, 4);
			let end = value.substr(-3);
			return seart + '****' + end;
		}
	},
	methods: {
		// 封装一个错误提示
		error() {
		uni.showToast({
				icon: 'none',
				title: '系统繁忙,请稍后再试'
			});
		},
		// 点击选择地址,显示,位置,各人信息
		async selectedLocation() {
			let [error, success] = await uni.getSetting();
			console.log(error, success);
			if (success.authSetting['scope.address']) {
				// 已经获取数据,可以直接获取用户的收货信息
				let [err, res] = await uni.chooseAddress();
				if (!err) {
					this.receivingInfo = res;
					console.log(this.receivingInfo);
					this.isShowLocation = true;
				}
			}
		},
		// 封装获取本地购物车列表
		async getGoodsDetal() {
			let [err, res] = await uni.getStorage({
				key: 'goodsDetal'
			});
			if (res) {
				// 只需要选中的数据
				res.data = res.data.filter(item => {
					return item.checked === true;
				});
				return res.data;
			} else {
				uni.showToast({
					title: '你是怎么进来的?',
					icon: 'none'
				});
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		// 点击支付按钮触发事件
		async toPay() {
			// 有两种情况,需要判定,一种是用户没有选择地址,一种是用户没有登录
			// 查看本地存储有没有token

			let [tokenError, token] = await uni.getStorage({
				key: 'token'
			});
			if (!this.isShowLocation) {
				uni.showToast({
					icon: 'none',
					title: '请先输入收货信息'
				});
			} else if (!token) {
				await uni.showToast({
					icon: 'none',
					title: '购买前请先登录'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}, 1500);
			} else {
				// 这里我们要生成订单了
				let goods = this.bayList.map(item => {
					return { goods_id: item.goods_id, goods_number: item.time, goods_price: item.goods_price };
				});

				let [orderError, orderRes] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create',
					header: {
						Authorization: token.data
					},
					method: 'POST',
					data: {
						order_price: this.allProduct,
						consignee_addr: this.receivingInfo.provinceName + this.receivingInfo.cityName + this.receivingInfo.countyName + this.receivingInfo.detailInfo,
						goods
					}
				});
				// console.log(orderRes)
				if (orderRes.data.meta.status === 200) {
					// 假如成功拿到订单号
					let order_number = orderRes.data.message.order_number;
					// 获取支付参数
					let [payError, payRes] = await uni.request({
						url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder',
						header: {
							Authorization: token.data
						},
						method: 'POST',
						data: { order_number }
					});
					console.log(payRes);
					if (payRes.data.meta.status === 200) {
						// 这里我们需要调用微信的支付方法
						console.log(payRes.data.message.pay);
						let [err, res] = await uni.requestPayment(payRes.data.message.pay);
						console.log(err, res);

						if (!err) {
							// 先获取本地的购物车列表
							let [getStorageError,getStorageRes] = await uni.getStorage({
								key: 'goodsDetal'
							});
							console.log(getStorageRes)
							let goodsList = getStorageRes.data.filter(item => {
								return !item.checked;
							});
							// 把购物里面的已经购买的数据删除
							await uni.setStorage({
								key: 'goodsDetal',
								data: goodsList
							});
							setTimeout(()=>{
								uni
									.showToast({
										icon: 'none',
										title: '支付成功'
									})
									.then(() => {
										uni.redirectTo({
											url: '/pages/order/index'
										});
									});
							},1200)
						} else {
							this.error();
						}
					} else {
						this.error();
					}
				} else {
					this.error();
				}
			}
		}
	}
};
</script>

<style lang="less">
.payIndex {
	min-height: 100vh;
	background-color: #f9f9f9;
	padding: 20rpx 15rpx 0rpx;
	margin-bottom: 83rpx;
	.locationContainer {
		margin: 0 auto 35rpx;
		width: 711rpx;
		height: 187rpx;
		background-color: #fff;
		border-radius: 5rpx;
	}
	.getConsignee {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 303rpx;
		height: 89rpx;
		border: 2rpx solid #7d00ff;
		border-radius: 45rpx;
		color: #7d00ff;
		font-size: 30rpx;
		padding: 0;
		background: none;
		line-height: 1;
		&::after {
			border: 0;
		}
	}
	.uesrInfo {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		padding: 16rpx 17rpx 34rpx 25rpx;
		margin-bottom: 35rpx;
	}
	.userLocaton {
		width: 665rpx;
		height: 84rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		color: #434343;
		font-size: 30rpx;
	}
	.userDetal {
		font-size: 26rpx;
		color: #434343;
	}
	.user_name {
		margin-right: 19rpx;
	}
	.payGoodsList {
		box-sizing: border-box;
		min-height: calc(100vh - 243rpx);
		background-color: #fff;
		border-radius: 5rpx;
		padding-left: 20rpx;
		padding-top: 17rpx;
	}
	.goodsListTitel {
		margin-bottom: 17rpx;
		color: #434343;
		font-size: 26rpx;
	}
	/deep/ .goods_item {
		padding: 0;
	}
	.floorFn {
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		height: 83rpx;
		padding: 16rpx 27rpx 15rpx 28rpx;
		border: 2rpx solid #dedede;
		background-color: #fff;
	}
	.total_price {
		display: flex;
	}
	.total_name {
		width: 78rpx;
		height: 37rpx;
		color: #292929;
		font-size: 26rpx;
		margin-right: 20rpx;
	}
	.price_doll {
		font-size: 18rpx;
		color: #7d00ff;
	}
	.to_result {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		height: 52rpx;
		border-radius: 26rpx;
		font-size: 21rpx;
		color: #fff;
		// background-color: #7d00ff;
		background-color: #b6b6b6;
	}

	.click_result {
		background-color: #7d00ff;
	}
}
</style>
